//引入引入图表核心组件
import * as echarts from 'echarts/core'
//引入折线图所需的组件

// import { GridComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
//引入堆叠面积图表所需的组件 未来一周气温变化折线图
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent
} from 'echarts/components'

//柱形图组件

import { BarChart } from 'echarts/charts';

var myChart1, myChart2, myChart3, myChart4;//声明全局变量

// import { LineChart } from 'echarts/charts'
// import { UniversalTransition } from 'echarts/features'
// import { CanvasRenderer } from 'echarts/renderers'

//折线图函数封装
function initEBasicLineChart(chartDom, xAxisData, seriesData) {
  echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])
  // var chartDom = document.getElementById('main')//此种方式是js中获取html中文档dom元素的方式，但是不使用于vue中
  if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
    myChart1.dispose();
  }


  myChart1 = echarts.init(chartDom)//vue3中获取dom元素的方式,此为第三步：访问dom
  var option = {
    xAxis: {
      type: 'category',
      data: xAxisData,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: seriesData,
        type: 'line',
      },
    ],
  }

  option && myChart1.setOption(option)
}

//堆叠面积图表函数封装
function initStackedAreaChart(chartDom, xAxisData, tempMinSeries, tempMaxSeries) {
  echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition,
  ])

  if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
    myChart2.dispose();
  }
  // var chartDom = document.getElementById('main')//此种方式是js中获取html中文档dom元素的方式，但是不使用于vue中
  myChart2 = echarts.init(chartDom) //vue3中获取dom元素的方式,此为第三步：访问dom
  var option

  option = {
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      data: ['tempMin', 'tempMax'],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: xAxisData,
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: 'tempMin',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: tempMinSeries,
      },
      {
        name: 'tempMax',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: tempMaxSeries,
      },
    ],
  }

  option && myChart2.setOption(option)
}

//柱形图函数封装
function initBasicBarChart(chartDom, xAxisData1, seriesData1) {
  echarts.use([GridComponent, BarChart, CanvasRenderer]);

  // var chartDom = document.getElementById('main')//此种方式是js中获取html中文档dom元素的方式，但是不使用于vue中
  if (myChart3 != null && myChart3 != "" && myChart3 != undefined) {
    myChart3.dispose();
  }
  myChart3 = echarts.init(chartDom)//vue3中获取dom元素的方式,此为第三步：访问dom

  var option;
  option = {

    xAxis: {
      type: 'category',
      data: xAxisData1,

    },
    yAxis: {
      type: 'value',
      show: false, // 隐藏 y 轴
    },
    series: [
      {
        data: seriesData1,
        type: 'bar',
        // 设置柱子宽度
        barWidth: '20%',
        label: {
          show: true, // 显示标签
          position: 'top', // 标签位置在柱状图上方
          color: '#333', // 标签颜色
          fontSize: 17,// 标签字体大小
          // 使用 formatter 属性添加摄氏度符号
          formatter: '{c}°'
        },
        // 设置柱子样式
        itemStyle: {
          color: '#3090FF',
          // 设置圆角，四个值分别代表左上、右上、右下、左下的圆角半径
          borderRadius: [5, 5, 0, 0]
        }
      }
    ]
  };
  option && myChart3.setOption(option)
}

//未来一周气温折线图函数封装
function initTemperatureChangeChart(chartDom, xAxisData, tempMinSeries, tempMaxSeries) {
  echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    MarkLineComponent,
    MarkPointComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
  ]);
  if (myChart4 != null && myChart4 != "" && myChart4 != undefined) {
    myChart4.dispose();
  }
  // var chartDom = document.getElementById('main');
  myChart4 = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} °C'
      }
    },
    series: [
      {
        name: 'Highest',
        type: 'line',
        data: tempMaxSeries,
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
      {
        name: 'Lowest',
        type: 'line',
        data: tempMinSeries,
        markPoint: {
          data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
        },
        markLine: {
          data: [
            { type: 'average', name: 'Avg' },
            [
              {
                symbol: 'none',
                x: '90%',
                yAxis: 'max'
              },
              {
                symbol: 'circle',
                label: {
                  position: 'start',
                  formatter: 'Max'
                },
                type: 'max',
                name: '最高点'
              }
            ]
          ]
        }
      }
    ]
  };

  option && myChart4.setOption(option);

}
export { initEBasicLineChart, initStackedAreaChart, initBasicBarChart, initTemperatureChangeChart } 